<template>
  <view class="address-panel">
    <view class="address-title">
        <!-- 标题 -->
        <text class="title">选择收货地址</text>
        <!-- 关闭按钮 -->
        <text class="close iconfont icon-guanbi" @click="emit('close')"></text>
    </view>

    <!-- 收货地址列表开始 -->
    <view class="address-list-wrap">
        <template v-for="(item, index) in deliveryAddrList" :key="index">
            <view class="address-item" :class="item.id == currentAddrId ? 'active': ''" @click="handleChooseDeliveryAddr(item)">
                <view class="content-left">
                    <text class="iconfont icon-dizhi"></text>
                    <view class="content-box">
                        <view class="top">
                            <text>{{item.region}} {{ item.address }}</text>
                        </view>
                        <view class="bottom">
                            <text>{{item.name}}</text>
                            <text class="mobile">{{ item.mobile }}</text>
                        </view>
                    </view>
                </view>
                <view class="content-right">
                    <uni-tag :mark="true" text="默认" type="error" size="mini" v-if="item.is_default" />
                </view>
            </view>
        </template>

        <view class="add-address">
            <text class="add-btn"  @click="goto('/pagesDeliveryAddr/delivery_address/delivery_address')">新增收货地址+</text>
        </view>
    </view>
    <!-- 收货地址列表结束 -->
  </view>
</template>

<script setup lang="ts">
import { reqUserDeliveryAddrListAPI } from "@/apis/userDeliveryAddr"
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores'


// -------------------------- 定义全局变量开始 --------------------------
// 用户存储
const userStore = useUserStore()

// 关闭弹层
const emit =  defineEmits(['close'])

// 当前收货地址ID
const currentAddrId = ref(0)

onMounted(() => {
  getUserDeliveryAddr()
})
// -------------------------- 定义全局变量结束 --------------------------



// ------------------------ 获取收货地址功能开始 ------------------------
// 定义收货地址变量
const deliveryAddrList = ref([])

// 请求获取收货地址
const getUserDeliveryAddr = async () => {
  const result = await reqUserDeliveryAddrListAPI({status: 1})
  deliveryAddrList.value = result.data.user_delivery_addrs != null ? result.data.user_delivery_addrs : []
  if (deliveryAddrList.value.length > 0) {
    if (userStore.deliveryAddr.id) { // 如果已经选择过收货地址的时候
      currentAddrId.value = userStore.deliveryAddr.id
    } else {
      let deliveryAddr = null
      // 选择默认地址
      deliveryAddrList.value.forEach((item) => {
        if (item.is_default == 1) {
          deliveryAddr = item
        }
      });

      // 没有默认地址选择第一个地址
      if (!deliveryAddr) {
        deliveryAddr = deliveryAddrList.value[0]
      }

      currentAddrId.value = deliveryAddr.id
      userStore.setDeliveryAddr(deliveryAddr)
    }
  }
}
// ------------------------ 获取收货地址功能结束 ------------------------



// ------------------------ 处理选择地址事件开始 ------------------------
const handleChooseDeliveryAddr = (item) => {
    currentAddrId.value = item.id
    userStore.setDeliveryAddr(item)
    emit('close')
}
// ------------------------ 处理选择地址事件结束 ------------------------



// ------------------------ 跳转收货地址功能开始 ------------------------
const goto = (url) => {
  uni.navigateTo({url})
  emit('close')
}
// ------------------------ 跳转收货地址功能结束 ------------------------
</script>

<style lang="scss">
.address-panel {
  padding: 20rpx;
  background-color: #fff;
  .address-title {
      display: flex;
      align-items: center;
        
      padding: 0 0 20rpx 0;
      border-bottom: 2rpx solid #ccc;
      .title {
          font-size: 34rpx;
          flex: 1;
          text-align: center;
      }
      .close {
          width: 40rpx;
          font-size: 40rpx;
      }
  }

  // 收货地址列表
  .address-list-wrap {
    padding: 20rpx 0 10rpx 0;
    .address-item {
      display: flex;
      justify-content: space-between;

      border: 2rpx solid #ccc;
      border-radius: 10rpx;
      padding: 10rpx;
      margin-bottom: 20rpx;
      .content-left {
        display: flex;
        align-items: center;
        flex: 1;
        .iconfont {
          font-size: 40rpx;
          color: #008000;
          padding-right: 8rpx; 
        }
          .content-box {
            .top {
              padding-bottom: 16rpx;
            }
            .bottom {
              .mobile {
                margin-left: 10rpx;
              }
            }
          }
      }
      .content-right {
        width: 60rpx;
      }
    }
    .active {
      border: 2rpx solid #008000;
    }

    // 新增地址按钮
    .add-address {
      text-align: center;
      padding: 20rpx 0 10rpx 0;
      .add-btn {
        padding: 10rpx 60rpx;
        border: 2rpx solid #008000;
        color: #008000;
      }
    }
}
}
</style>